<template>
  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="glass-effect rounded-xl p-6 w-full max-w-md mx-4">
      <div class="flex justify-between items-center mb-6">
        <h3 class="text-lg font-bold cyber-text">添加测试平台</h3>
        <button 
          @click="$emit('close')"
          class="text-gray-400 hover:text-gray-600 transition-colors"
        >
          <i class="fas fa-times"></i>
        </button>
      </div>

      <form @submit.prevent="handleSubmit" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">平台名称</label>
          <input 
            v-model="formData.name"
            type="text" 
            required
            class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            placeholder="输入平台名称"
          >
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">平台类型</label>
          <select 
            v-model="formData.type"
            required
            class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
          >
            <option value="">选择类型</option>
            <option value="Web">Web</option>
            <option value="Mobile">Mobile</option>
            <option value="API">API</option>
            <option value="Desktop">Desktop</option>
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">状态</label>
          <select 
            v-model="formData.status"
            required
            class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
          >
            <option value="运行中">运行中</option>
            <option value="待机">待机</option>
            <option value="停止">停止</option>
          </select>
        </div>

        <div class="flex justify-end space-x-4 pt-4">
          <button 
            type="button"
            @click="$emit('close')"
            class="px-6 py-3 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors"
          >
            取消
          </button>
          <button 
            type="submit"
            class="cyber-button px-6 py-3 text-white rounded-lg hover-glow transition-all duration-200"
          >
            保存
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

interface PlatformData {
  name: string
  type: string
  status: string
  lastUpdated: string
}

const emit = defineEmits<{
  close: []
  save: [data: PlatformData]
}>()

const formData = reactive({
  name: '',
  type: '',
  status: '运行中'
})

const handleSubmit = () => {
  const platformData: PlatformData = {
    ...formData,
    lastUpdated: new Date().toLocaleString('zh-CN')
  }
  emit('save', platformData)
}
</script>

